<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>复焕集 - 添加商品</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="fontawesome/css/all.min.css">
    <link rel="stylesheet" href="css/base.css" />   
    <link rel="stylesheet" href="css/addProduct.css" />
    <link rel="stylesheet" href="css/mineShowInformation.css" />
    <link rel="stylesheet" href="css/login.css" />
	<link rel="stylesheet" href="css/sign.css" />
    <style>
	.section-title {
	    font-size: 1.35rem;
	    font-weight: 600;
	    color: var(--primary-color);
	    margin-bottom: 25px;
	    padding-bottom: 15px;
	    border-bottom: 2px solid var(--border-color);
	    justify-content: left;
	} 
	.image-upload-container p{
		color:#ddd;
	}
	.is-invalid {
	    border-color: #dc3545 !important;
	}
	.invalid-feedback {
	    color: #dc3545;
	    font-size: 0.875em;
	    margin-top: 0.25rem;
	}
    </style>
</head>
<body>
    <div class="container-fluid logP hidden text-center" id="logP">
			<div class="login-container hidden" id="log">
				<!-- 登录卡片 -->
				<div class="login-card" id="login-card">
					<!-- 头部区域 -->
					<div class="login-header">
						<h1>欢迎回来</h1>
						<p>请登录您的账户</p>
					</div>

					<!-- 表单区域 -->
					<div class="form-container">
						<!-- 头像显示区域 -->
						<div class="avatar-container" id="avatarContainer">
							<div class="avatar-placeholder">
								👤
							</div>
						</div>

						<!-- 响应消息 -->
						<div id="responseMessage" class="response-message"></div>

						<!-- 登录表单 -->
							<!-- 用户名/邮箱 -->
							<div class="form-group">
								<label for="loginId">用户名</label>
								<div class="input-wrapper">
									<div class="input-icon">@</div>
									<input type="text" id="loginId" name="loginId" class="form-control"
										placeholder="请输入用户名" required>
								</div>
							</div>

							<!-- 密码 -->
							<div class="form-group">
								<label for="password">密码</label>
								<div class="input-wrapper">
									<div class="input-icon">🔒</div>
									<input type="password" id="password" name="password" class="form-control"
										placeholder="请输入密码" required>
									<div class="password-toggle" id="togglePassword">👁️</div>
								</div>
								<div style="margin-top: 8px;">
									<span id="loginInfo" class="status-text"></span>
								</div>
								<div class="forgot-password">
									<a href="#">忘记密码?</a>
								</div>
							</div>

							<!-- 记住我 -->
							<div class="remember-me">
								<input type="checkbox" id="rememberMe" name="rememberMe">
								<label for="rememberMe">记住我的登录状态</label>
							</div>

							<!-- 登录按钮 -->
							<button class="login-btn" id="loginBtn">
								<span id="loginBtnText">登录账户</span>
							</button>

					</div>
				</div>
			</div>

			<div class="register-container hidden" id="sig">
				<!-- 注册卡片 -->
				<div class="register-card">
					<!-- 头部区域 -->
					<div class="register-header">
						<h1>用户注册</h1>
						<p>创建您的专属账户</p>
					</div>

					<!-- 表单区域 -->
					<div class="form-container">
						<!-- 响应消息 -->
						<div id="responseMessage" class="response-message"></div>

						<!-- 注册表单 -->
						<form id="registerForm">
							<!-- 用户名 -->
							<div class="form-group">
								<label for="username">用户名</label>
								<div class="input-wrapper">
									<div class="input-icon">👤</div>
									<input type="text" id="username" name="username" class="form-control"
										placeholder="请输入用户名" required>
								</div>
								<div style="margin-top: 8px;">
									<span id="statusText" class="status-text">请输入用户名</span>
								</div>
							</div>

							<!-- 密码 -->
							<div class="form-group">
								<label for="password">密码</label>
								<div class="input-wrapper">
									<div class="input-icon">🔒</div>
									<input type="password" id="passwords" name="password" class="form-control"
										placeholder="请输入密码" required>
									<div class="password-toggle" id="togglePasswords">👁️</div>
								</div>
								<div style="margin-top: 8px;">
									<span id="passwordText" class="status-text">请输入密码</span>
								</div>
							</div>

							<!-- 性别 -->
							<div class="form-group">
								<label for="gender">性别</label>
								<div class="input-wrapper">
									<div class="input-icon">👫</div>
									<select id="gender" name="gender" class="form-control" required>
										<option value="空">请选择性别</option>
										<option value="男">男</option>
										<option value="女">女</option>
									</select>
								</div>
								<div style="margin-top: 8px;">
									<span id="genText" class="status-text"></span>
								</div>
							</div>

							<!-- 生日 -->
							<div class="form-group">
								<label for="birthday">生日</label>
								<div class="input-wrapper">
									<div class="input-icon">📅</div>
									<input type="date" id="birthday" name="birthday" class="form-control" required>
								</div>
							</div>

							<!-- 上传头像 -->
							<div class="form-group">
								<label for="headImg">上传头像</label>
								<input type="file" id="headImg" name="headImg" accept="image/*" style="display: none;">
								<button type="button" id="uploadBtn" class="upload-btn">选择图片</button>
							</div>

							<!-- 注册按钮 -->
							<button class="register-btn" id="registerBtn">
								<span id="registerBtnText">注册</span>
							</button>
						</form>

					</div>
				</div>

			</div>
		</div>
		<!-- 导航栏 -->
		<div class="container-fluid fixed-top  navbar-custom" id="top">
			<nav class="navbar navbar-expand-lg" role="navigation">

				<div class="container position-relative">
					<a href="index.jsp" class="navbar-brand navbar-b-custom font-logo">
						<img src="img/headLogo.png" alt="" id="headImage">
					</a>
					<!-- 搜索条 -->
					<form action="searchGoodsDo" method="get">
						<div class="d-flex position-absolute start-50 translate-middle-x serchBar">
							<input  name="searchName" type="text" class="form-control1 form-control-sm" id="searchBar" />
							<button class="btn btn-primary ms-2 serchBut" id="searchBtn">搜索</button>
						</div>
					</form>
					<!-- 右侧用户信息栏 -->



					<c:choose>
						<c:when test="${not empty sessionScope.logInUser}">
							<ul class="navbar-nav mb-2 mb-lg-0 align-items-center">
								<li class="nav-item d-flex align-items-center">
									<img src="${logInUser.headimg}" alt="" class="headimg align-self-center">
								</li>
								<li class="nav-item">
									<a href="mineInformation.jsp" class="nav-link navbar-a-custom" id="">个人主页</a>
								</li>
								<li class="nav-item">
									<a href="ProductOrder.jsp" class="nav-link navbar-a-custom">我的订单</a>
								</li>
								<li class="nav-item">
									<a href="userLogOut" class="nav-link navbar-a-custom">退出</a>
								</li>
							</ul>
						</c:when>
						<c:otherwise>
							<ul class="navbar-nav mb-2 mb-lg-0 align-items-center">
								<li class="nav-item"><a href="#" class="nav-link navbar-a-custom" id="sign">注册</a></li>
								<li class="nav-item"><a href="#" class="nav-link navbar-a-custom" id="login">登录</a></li>
							</ul>
						</c:otherwise>
					</c:choose>

				</div>
			</nav>
		</div>
	<!-- 左侧固定菜单 -->
	<div class="left-panel" id="left" style="margin-top:40px;">
		<div class="personal_Information">
			<div class="mine_personal_Information active">
				<img src="img/mine_personal_information.png" alt=""> <span
					class="mineInformation">我的信息</span>
			</div>
			<div class="mine_personal_Information Mytransaction">
				<img src="img/mine_information_order.png" alt=""> <span>我的交易</span>
				<img src="img/prePic.png" alt="" class="MytransactionPng MytransactionAction">
			</div>
			<a href="order.jsp">
				<div class="mine_personal_Information needHidden mine_order_Hidden">
					已购买</div>
			</a>
			<a href="ProductOrder.jsp">
				<div class="mine_personal_Information needHidden mine_order_Hidden">
					订单处理</div>
			</a>
			<a href="addProduct.jsp">
                <div class="mine_personal_Information needHidden mine_order_Hidden" >
                     	添加商品
                </div>
            </a>
            <a href="myColleation.jsp">
				<div class="mine_personal_Information" data-menu-item="collection">
					<img src="img/mine_personal_collect.png" alt=""> <span>我的收藏</span>
				</div>
			</a>
			<div class="mine_personal_Information AccountSettings">
				<img src="img/mine_information_set.png" alt=""> <span class="">账户设置</span>
				<img src="img/prePic.png" alt=""
					class="AccountSettingsPng AccountSettingsAction">
			</div>
			
			<a href="mineInformation.jsp">
				<div class="mine_personal_Information needHidden mine_personal_Information_Hidden">
					个人资料</div>
			</a> 
			<a href="informationModification.jsp">
				<div class="mine_personal_Information needHidden mine_personal_Information_Hidden">
					账号与安全</div>
			</a>

		</div>
	</div>

	<!-- 右侧固定导航栏 -->
	<div class="right-panel"  style="margin-top:40px;">
		<div class="right-section">
			<div class="right-title">常用功能</div>
			<a href="sellerInfo.jsp" class="right-link"><i class="fa fa-store"></i> 我的店铺</a>
				<a href="mineInformation.jsp" class="right-link"><i class="fa fa-comment-alt"></i>
				我的评价</a> 
				<a href="#" class="right-link"><i class="fa fa-question-circle"></i> 帮助中心</a>
		</div>
	</div>
     
    <!-- 中部内容区 - 添加商品页面 -->
    <div class="main-content">
        <div class="middle" id="middle">
            <div class="add-product-header">
                <h2><i class="fas fa-plus-circle"></i> 添加新商品</h2>
                <p>填写商品信息，让您的宝贝快速上架销售</p>
            </div>
            
            <form id="productForm" method="post" enctype="multipart/form-data">
                <!-- 基本信息 -->
                <div class="form-section">
                    <div class="section-title"><i class="fas fa-info-circle"></i> 基本信息</div>
                    <div class="row mb-4">
                        <div class="col-md-6 mb-3">
                            <label class="form-label required">商品名称</label>
                            <input type="text" class="form-control" placeholder="请输入商品名称"  name="goodname" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label required">商品分类</label>
                            <select class="form-select"  name="goodtype" required>
                                <option value="" >请选择分类</option>
                                <option value="1">手机数码</option>
                                <option value="2">服装鞋包</option>
                                <option value="3">电脑办公</option>
                                <option value="4">家居家装</option>
                                <option value="5">图书文娱</option>
                                <option value="6">游戏设备</option>
                                <option value="7">其他</option>
                            </select>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label required">出售价格</label>
                            <div class="input-group">
                                <span class="input-group-text">¥</span>
                                <input type="number" class="form-control sellingPrice" name="goodprice" placeholder="0.00" min="0" step="0.01" required>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">原价</label>
                            <div class="input-group">
                                <span class="input-group-text">¥</span>
                                <input type="number" class="form-control originalPrice"  name="oriprive" placeholder="0.00" min="0" step="0.01">
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label required">库存数量</label>
                            <input type="number" class="form-control inventory" name="goodnum" placeholder="1" min="1" value=1 required>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <label class="form-label required">商品描述</label>
                        <textarea class="form-control productDescription" placeholder="请详细描述您的商品（成色、功能、瑕疵等）"  name="gooddec" rows="4" required></textarea>
                    </div>
                </div>
                
                <!-- 图片上传 -->
				<div class="form-section">
				  <div class="section-title"><i class="fas fa-images"></i> 商品图片</div>
				  <div class="image-upload-container" id="uploadArea">
				      <div class="upload-indicator" id="uploadIndicator"></div>
				      <i class="fas fa-cloud-upload-alt"></i>
				      <h5>点击或拖拽上传图片</h5>
				      <p>至少上传1张，最多可上传5张图片</p>
				      <div class="upload-progress" id="uploadProgress">上传中: 0%</div>
				      <input type="file" class="d-none" id="imageUpload" multiple accept="image/*">
				  </div>
				  
				  <div class="image-preview-container" id="previewContainer">
				      <!-- 图片预览区域将通过JS动态生成 -->
				    </div>
				</div>
                
                <!-- 商品详情 -->
                <div class="form-section productDetails">
                    <div class="section-title"><i class="fas fa-tag"></i> 商品属性</div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label required">新旧程度</label>
                            <select class="form-select fineness" name="goodstat" required>
                                <option value="">请选择成色</option>
                                <option value="1">全新</option>
                                <option value="2">99新</option>
                                <option value="3">95新</option>
                                <option value="4">9成新</option>
                                <option value="5">8成新</option>
                                <option value="6">7成新及以下</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label required">交易方式</label>
                            <div class="mt-2">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input transactionSettings" value="1" type="radio" id="shipping" name="transactions">
                                    <label class="form-check-label" for="shipping">邮寄</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input transactionSettings" value="2" type="radio" id="pickup" name="transactions">
                                    <label class="form-check-label" for="pickup">自提</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label required">运费设置</label>
                        <div class="form-check">
                            <input class="form-check-input shippingFee" type="radio" name="goodFreightType" id="freeShipping" value="1">
                            <label class="form-check-label" for="freeShipping">卖家包邮</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input shippingFee" type="radio" name="goodFreightType" id="buyerPays" value="2">
                            <label class="form-check-label" for="buyerPays">买家承担运费</label>
                        </div>
                    </div>
                </div>
                
                <!-- 按钮区域 -->
                <div class="action-buttons">
                    <button type="submit" class="btn btn-primary1">立即发布</button>
                </div>
            </form>
        </div>
    </div>
        
    <!-- 底部区 -->
		<footer class="container-fluid bottom p-3 mt-auto" id="footer">
			<div class="font-logo infoLeft mx-auto">
				<strong>复焕集 </strong>旧物也能焕然一新的二手市场。
			</div>
			<div class="container">
				<div class="d-flex flex-wrap justify-content-between">
					<ul class="footer-links mb-2 mb-lg-0 flex-grow-1 px-3 text-center">
						<strong>关于我们</strong>
						<li><a href="">公司介绍</a></li>
						<li><a href="">团队介绍</a></li>
						<li><a href="">媒体报道</a></li>
						<li><a href="">加入我们</a></li>
					</ul>
					<ul class="footer-links mb-2 mb-lg-0 flex-grow-1 px-3 text-center">
						<strong>帮助中心</strong>
						<li><a href="">新手入门</a></li>
						<li><a href="">交易流程</a></li>
						<li><a href="">常见问题</a></li>
						<li><a href="">安全指南</a></li>
					</ul>
					<ul class="footer-links mb-2 mb-lg-0 flex-grow-1 px-3 text-center">
						<strong>规则中心</strong>
						<li><a href="">用户协议</a></li>
						<li><a href="">隐私政策</a></li>
						<li><a href="">交易规则</a></li>
						<li><a href="">社区公约</a></li>
					</ul>
					<ul class="footer-links mb-2 mb-lg-0 flex-grow-1 px-3 text-center">
						<strong>联系我们</strong>
						<li><a href="">客服电话：400-114-514</a></li>
						<li><a href="">商务合作：bd@fuhuanji.com</a></li>
						<li><a href="">举报反馈：report@fuhuanji.com</a></li>
					</ul>
				</div>
			</div>
			<div class="copyright">
				© 2023 复焕集 All Rights Reserved. 蜀ICP备12345678号
			</div>
		</footer>
	<script src="bootstrap/js/bootstrap.min.js"></script>
	<script src="js/jquery.js"></script>
	<script src="js/mineInformation.js"></script>
    <script src="js/addProduct.js"></script>
    <script src="js/menuNavigation.js"></script>
<script>
$(document).ready(function() {
    const urlParams = new URLSearchParams(window.location.search);
    const goodsId = urlParams.get('goodsId');
    
    if (goodsId) {
        $('.add-product-header h2').html('<i class="fas fa-edit"></i> 编辑商品');
        $('.add-product-header p').text('修改您的商品信息');
        $('.action-buttons button').text('更新商品');
        
        $.ajax({
            url: 'getGoodsById',
            type: 'GET',
            data: { goodsId: goodsId },
            dataType: 'json',
            success: function(data) {
                const goods = data.goods;
                
                // 1. 商品名称
                $('input[name="goodname"]').val(goods.goodname);
                
                // 2. 商品分类 - 值映射 (0->7, 其他值保持不变)
                const goodTypeMap = {
                    0: 7 // 映射到"其他"
                };
                const mappedGoodType = goodTypeMap[goods.goodtype] || goods.goodtype;
                $('select[name="goodtype"]').val(mappedGoodType);
                
                // 3. 价格和库存
                $('input[name="goodprice"]').val(goods.goodprice);
                $('input[name="oriprive"]').val(goods.oriprive);
                $('input[name="goodnum"]').val(goods.goodnum);
                
                // 4. 商品描述
                $('textarea[name="gooddec"]').val(goods.gooddec);
                
                // 5. 新旧程度 - 值映射 (8->6, 其他值保持不变)
                const goodStatMap = {
                    8: 6 // 映射到"7成新及以下"
                };
                const mappedGoodStat = goodStatMap[goods.goodstat] || goods.goodstat;
                $('select[name="goodstat"]').val(mappedGoodStat);
                
                // 6. 交易方式
                $('input[name="transactions"]').each(function() {
                    if (parseInt(this.value) === goods.goodTradetType) {
                        $(this).prop("checked", true);
                    }
                });
                
                // 7. 运费设置
                $('input[name="goodFreightType"]').each(function() {
                    if (parseInt(this.value) === goods.goodFreightType) {
                        $(this).prop("checked", true);
                    }
                });
                
                // 8. 图片加载
                const previewContainer = $('#previewContainer');
                previewContainer.empty();
                
                if (data.images && data.images.length > 0) {
                    data.images.forEach(function(imageUrl, index) {
                        const preview = $(`
                            <div class="image-preview" data-id="img-${index}">
                                <img src="${imageUrl}" alt="商品图片">
                                <div class="delete-btn"><i class="fas fa-times"></i></div>
                            </div>
                        `);
                        previewContainer.append(preview);
                    });
                } else {
                    previewContainer.html('<p class="text-muted text-center py-3">暂无商品图片</p>');
                }
                
                // 添加隐藏字段保存商品ID
                $('#productForm').append(`<input type="hidden" name="goodsId" value="${goodsId}">`);
                
                console.log("商品数据加载完成:", goods);
            },
            error: function(xhr, status, error) {
                console.error("AJAX Error:", status, error);
                alert('加载商品信息失败');
            }
        });
    }
});
</script>
</body>
</html>